<template>
  <div class="home">

    <h1>首页</h1>
    <hr>
     <div class="demo-type">
    <el-avatar :size="60" src="https://empty" @error="errorHandler">
      <img :src="this.avatar"/>
    </el-avatar>
       欢迎:{{username}} 登录
<!--  三级联动     -->
       <hr>
       <div class="block">
         <span class="demonstration">商品分类:</span>
         <el-cascader
             v-model="value"
             :options="options"
             :props="{ expandTrigger: 'hover',value:'id',label:'name' }"
             @change="handleChange"></el-cascader>
       </div>
<!--  树形菜单     -->
       <hr>
       <el-tree show-checkbox :data="data" :props="{value:'id',label:'name'}" @node-click="handleNodeClick"></el-tree>
  </div>

  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  data(){
    return{
      username:'',
      avatar:'',
      value: [],
      options: [],
      data:[]
    }
  },
  methods:{
    handleNodeClick(data) {
      console.log(data);
    },
    getCategorysTrees(){
      this.axios.get("http://127.0.0.1:8888/api/goods/categorys").then(resp=>{
        this.options=resp.data
        this.data=resp.data
      })
    },
    handleChange(value) {
      console.log(value);
    },
    getUserInfo(){
      var username = localStorage.getItem("username");
      var avatar = localStorage.getItem("avatar");
      this.username=username
      this.avatar=avatar
    },
    errorHandler() {
      return true
    }
  },
  created() {
    this.getCategorysTrees();
    this.getUserInfo();
  }
}
</script>
